import React from 'react'

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import HeaderArea from '../header/header'
import './index.scss'
import { WeChatIcon, QQIcon } from '../../components/icons/icons'

import { copyContent } from '../../common/util'
import pageInfo from '../../pageConfigData/index'
let { footerInfo } = pageInfo


export default function index() {


    function copyContactContent(cont) {
        let copyResult = copyContent(cont)
        if(copyResult){
            toast("复制成功!")
        }
    }

    return (
        <div className='bodyBox'>
            <HeaderArea />

            {/* 视频背景 */}
            <div className="bg_video" >
                <video
                    autoPlay="autoplay" loop="loop"
                    muted="muted"
                    role="presentation"
                    src='https://media.umbraco.io/stage-vipp-com-2/w4wl0fx2/hero-web-cold-hawaii_sound_final.mp4'>
                    <source src="movie.mp4" type="video/mp4" />
                    您的浏览器不支持 video 标签。
                </video>
            </div>


            {/* 内容区域 */}
            <div className='contentBox'>


            </div>

            <footer className='footerBox'>
                <div className="call_us">
                    <p>联系我们</p>

                    {footerInfo.tel && (
                        <p>电话：<span className='hover_text'>{footerInfo.tel}</span></p>
                    )}

                    {footerInfo.email && (
                        <p>邮箱：<span className='hover_text'>{footerInfo.email}</span></p>
                    )}

                    {footerInfo.address && (
                        <p>地址：<span className='hover_text'>{footerInfo.address}</span></p>
                    )}

                    <p className='icon_box'>
                        {footerInfo.WeChat && (
                            <span onClick={() => copyContactContent(footerInfo.WeChat)}>
                                <WeChatIcon />
                            </span>
                        )}
                        {footerInfo.qq && (
                            <span onClick={() => copyContactContent(footerInfo.WeChat)}>
                                <QQIcon />
                            </span>
                        )}
                    </p>
                </div>
                <div className="footer_content">
                    <p>©2021 老曲项目</p>
                    <p>©2024-2028 免责声明:所有软件均收集自网络，如有侵权请联系删除</p>
                    {
                        footerInfo.links && footerInfo.links.length > 0 && footerInfo.links.map(item => {
                            if(item.showState !== 'hidden'){
                                return (
                                    <p className='hover_text' key={item.label}>
                                        <a href={item.href} target={item.target} >{item.label}</a>
                                    </p>
                                )
                            }
                        })
                    }
                </div>
            </footer>
            <ToastContainer 
                position="bottom-center"
                autoClose={1000}
            />
        </div>
    )
}
